import '@ant-design/compatible/assets/index.css';
import { Table, Button, Modal, message } from 'antd';
import router from 'umi/router';
import React, { useState, useRef, useEffect  } from 'react';
import { useRequest } from '@umijs/hooks';
import { lostPerishablePage, scrapPerishables } from '../service'

const ScrappedPerishableGoods = props => {
  const { scrappedPerishableGoodsVisible, onCancel } = props;

  const actionRef = useRef();

  // 表格多选
  const [selectedRowKeys, handleSelectedRowKeys] = useState([])
  // 按钮loading
  const [loading, handleLoading] = useState(false)

  // 报废易腐物品分页接口
  const { data: lostPerishablePageD = {}, run: lostPerishablePageR } = useRequest(params => lostPerishablePage(params), {
    manual: true
  })
  // 报废易腐物品接口
  const { run: scrapPerishablesR } = useRequest(params => scrapPerishables(params), {
    manual: true,
    onSuccess: (res) => {
      handleLoading(false)
      message.success('报废成功')
      lostPerishablePageR({ current: 1, pageSize: 20 })
    }
  })

  // 多选
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      handleSelectedRowKeys(selectedRowKeys)
    }
  }

  // 报废易腐物品
  const scrapPerishableGoods = () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请选择一项易腐物品')
    } else {
      handleLoading(true)
      scrapPerishablesR({ lostNumbers: selectedRowKeys })
    }
  }

  // 改变页码
  const pageChange = (page, pageSize) => {
    lostPerishablePageR({ current: page, pageSize: pageSize })
  }

  useEffect(() => {
    lostPerishablePageR({ current: 1, pageSize: 20 })
  }, [])

  const columns = [
    {
      title: '遗失物品编号',
      dataIndex: 'lostNumber',
      render: (text, _) => (<a onClick={() => {
        sessionStorage.setItem(
          '/lostItemManage/lostItemDetail',
          JSON.stringify({ type: 'see', random: Math.random(), lostNumber: text })
        )
        router.push('/banksearchSystem/lostItemManage/lostItemDetail?id=' + text)
        onCancel()
      }}>{text}</a>)
    },
    {
      title: '遗失物品名称',
      dataIndex: 'lostArticlesName',
      render: (text, _) => (<a>{text}</a>),
    },
    {
      title: '入库日期',
      dataIndex: 'putStorageTime'
    },
  ];


  return (
    <>
      <Modal
        title={[
          <div key="title">报废易腐物品列表</div>
        ]}
        width='900px'
        visible={scrappedPerishableGoodsVisible}
        onOk={() => onCancel()}
        onCancel={() => onCancel()}
      >
        <Button type="primary" loading={loading} onClick={() => scrapPerishableGoods()}>
          报废易腐
        </Button>
        <Table
          actionRef={actionRef}
          rowKey='lostNumber'
          rowSelection={rowSelection}
          columns={columns}
          dataSource={lostPerishablePageD.data}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            total: lostPerishablePageD.total,
            showTotal: (total, range) => `第${range[0]}-${range[1]}条 共 ${lostPerishablePageD.total} 项`,
            defaultPageSize: 20,
            pageSizeOptions: ['20', '30', '40'],
            onChange: pageChange,
            onShowSizeChange: pageChange
          }}
        />
      </Modal>
    </>
  )
}

export default ScrappedPerishableGoods;